<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <div class="searchBox pull_left">
        <div class="pull_left txtClass">订单查询:</div>
        <el-input
          class="pull_left inputClass"
          placeholder="输入用户订单号"
          size="small"
          v-model="inputUser"
          clearable
        >
        </el-input>
        <el-button
          class="pull_left"
          type="primary"
          size="small"
          icon="el-icon-search"
          >查询</el-button
        >
        <div class="clear"></div>
      </div>
      <div class="searchBox pull_left">
        <div class="pull_left txtClass">会员查询:</div>
        <el-input
          class="pull_left inputClass"
          placeholder="输入会员"
          size="small"
          v-model="inputMember"
          clearable
        >
        </el-input>
        <el-button
          class="pull_left"
          type="primary"
          size="small"
          icon="el-icon-search"
          >查询</el-button
        >
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
    </div>
    <!-- 卡片视图 -->
    <order
      :headerData="headerData"
      :total="total"
      :tableData="tableData"
      @CurrentChange="CurrentChange"
      @SizeChange="SizeChange"
    >
      <template v-slot:mg_state="{ row }">
        <div>
          <el-switch
            v-model="row.mg_state"
            @change="stateClick(row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
      </template>
      <template v-slot:menu="{ row }">
        <div>
          <el-button @click="getUser(row)" type="success" round size="small"
            >查看</el-button
          >
          <el-button @click="getUser(row)" type="success" round size="small"
            >删除</el-button
          >
        </div>
      </template>
    </order>
  </div>
</template>
<script>
import { orderListMock, orderMyList } from "@/api/order.js";
import order from "../../components/order.vue";
export default {
  components: {
    order,
  },
  name: "orderManagement",
  data() {
    return {
      headerData: [
        {
          prop: "user_id",
          label: "订单号",
          width: "120px",
        },
        {
          prop: "shop_name",
          label: "商品名称",
          width: "120px",
        },
        {
          prop: "shop_price",
          label: "价格",
          width: "100px",
        },
        {
          prop: "shop_type",
          label: "类型",
          width: "120px",
        },
        {
          prop: "shop_num",
          label: "数量",
          width: "100px",
        },
        {
          prop: "create_time",
          label: "下单时间",
          width: "200px",
        },
        {
          prop: "status",
          label: "状态",
          width: "100px",
        },
        {
          prop: "user_type",
          label: "会员查询",
          width: "100px",
        },
      ],
      tableData: [],
      total: 0,
      pagesize: "5",
      pagenum: "1",
    };
  },
  created() {},
  mounted() {
    let _self = this;
    _self.dataInit();
  },
  methods: {
    changUser(row) {
      let _self = this;
      _self.changUserId = row.id;
      let { email, mobile } = JSON.parse(JSON.stringify(row));
      _self.ruleFormEdit = { email, mobile };
      // console.log(_self.ruleFormEdit)

      _self.dialogVisible2 = true;
    },
    dataInit() {
      let _self = this;
      let data = {
        pagenum: _self.pagenum,
        pagesize: _self.pagesize,
      };
      orderListMock().then((res) => {
        _self.tableData = res.data.list;
        _self.total = res.data.list.length;
        orderMyList(data).then((ress) => {
          _self.tableData = ress.data.user;
          _self.total = ress.data.total;
        });
      });
    },
    CurrentChange(val) {
      let _self = this;
      _self.pagenum = val;
      _self.dataInit();
    },
    SizeChange(val) {
      console.log(val);
      let _self = this;
      _self.pagesize = val;
      _self.dataInit();
    },
  },
};
</script>

<style lang="less" scoped>
.pull_left {
  float: left;
}
.pull_right {
  float: right;
}
.clear {
  clear: both;
}
.container {
  margin-left: 10px;
}
.breadcrumb {
  margin: 10px 0;
}
.inputClass {
  width: 150px;
  margin: 0 10px;
}
.txtClass {
  line-height: 32px;
}
.searchBox {
  margin: 0 20px 0 10px;
}
.search {
  width: 100%;
  margin: 20px 0;
}
</style>